<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div class="iconfont back-icon">
            &#xe682;
        </div>
      </div>
      <div class="header-input">
        <input type="text" class="iconfont" :placeholder="'\ue610'+'  输入城市/景点/游玩主题'" />
      </div>
      <router-link to="/city">
        <div class="header-right">
          {{this.city}}
          <span class="iconfont arrow-icon">&#xe64a;</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    city: String
  }
}
</script>

<!--scoped这里表示的是只能在这个页面进行使用-->
<!--lang="stylus"这里是使用我们的stylus组件的意思。-->
<style lang="stylus" scoped>
  @import "~styles/variables.styl"
  .header
      display: flex
      line-height $headerheight
      background: $bgColor
      color: #ffffff
      .header-left
          width: .64rem
          float: left
          .back-icon
            text-align: center
            font-size: .4rem
      .header-input
          flex: 1
          height: .64rem
          line-height: .64rem
          margin-top: .12rem
          margin-left: .2rem
          margin-bottom: .12rem
          background: #ffffff
          border-radius: .1rem
          color: #cacaca
          input
            margin-left: 0.2rem
            width: 95%
            height: 100%
            margin-bottom: 0.12rem
      .header-right
          width: 1.24rem
          float: right
          text-align: center
          color: #ffffff
</style>
